
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能字数统计工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6c5ce7;
            --secondary: #a29bfe;
            --accent: #fd79a8;
            --dark: #2d3436;
            --light: #f5f6fa;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        
        .main-content {
            padding: 30px;
        }
        
        .input-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: var(--dark);
        }
        
        textarea {
            width: 100%;
            min-height: 200px;
            padding: 15px;
            border: 2px solid #eee;
            border-radius: 10px;
            resize: vertical;
            font-size: 16px;
            line-height: 1.6;
            transition: all 0.3s ease;
        }
        
        textarea:focus {
            border-color: var(--secondary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(162, 155, 254, 0.2);
        }
        
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .stat-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            border-left: 4px solid var(--primary);
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary);
            margin: 10px 0;
        }
        
        .stat-label {
            color: #666;
            font-size: 0.9rem;
        }
        
        .detail-stats {
            margin-top: 30px;
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
        }
        
        .detail-stats h3 {
            margin-bottom: 15px;
            color: var(--dark);
        }
        
        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
        }
        
        .detail-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .detail-item:last-child {
            border-bottom: none;
        }
        
        .detail-label {
            color: #666;
        }
        
        .detail-value {
            font-weight: bold;
        }
        
        .buttons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        button {
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            background: var(--primary);
            color: white;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
            transition: all 0.3s ease;
            flex: 1;
        }
        
        button:hover {
            background: var(--secondary);
            transform: translateY(-2px);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .history {
            margin-top: 30px;
        }
        
        .history-title {
            font-size: 1.2rem;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .history-list {
            max-height: 200px;
            overflow-y: auto;
        }
        
        .history-item {
            padding: 10px;
            margin-bottom: 8px;
            background: rgba(162, 155, 254, 0.1);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .history-item:hover {
            background: rgba(162, 155, 254, 0.2);
        }
        
        .history-item .time {
            font-size: 0.8rem;
            color: #666;
            margin-top: 5px;
        }
        
        @media (max-width: 768px) {
            .container {
                border-radius: 0;
            }
            
            header {
                padding: 20px 15px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .main-content {
                padding: 20px 15px;
            }
            
            .stats-container {
                grid-template-columns: 1fr 1fr;
            }
            
            .buttons {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-text-width"></i> 智能字数统计工具</h1>
            <p>精确统计文本字数、字符数和段落数，支持中英文分别统计</p>
        </header>
        
        <div class="main-content">
            <div class="input-group">
                <label for="text-input">输入要统计的文本</label>
                <textarea id="text-input" placeholder="在此粘贴或输入您的文本内容..."></textarea>
            </div>
            
            <div class="buttons">
                <button id="count-btn"><i class="fas fa-calculator"></i> 统计字数</button>
                <button id="clear-btn"><i class="fas fa-trash"></i> 清空文本</button>
                <button id="example-btn"><i class="fas fa-lightbulb"></i> 加载示例</button>
            </div>
            
            <div class="stats-container" id="stats-container">
                <div class="stat-card">
                    <div class="stat-label">总字数</div>
                    <div class="stat-value" id="total-words">0</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">总字符数</div>
                    <div class="stat-value" id="total-chars">0</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">中文字数</div>
                    <div class="stat-value" id="chinese-chars">0</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">英文字数</div>
                    <div class="stat-value" id="english-chars">0</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">段落数</div>
                    <div class="stat-value" id="paragraphs">0</div>
                </div>
            </div>
            
            <div class="detail-stats">
                <h3>详细统计</h3>
                <div class="detail-grid">
                    <div class="detail-item">
                        <span class="detail-label">中文字符数:</span>
                        <span class="detail-value" id="detail-chinese">0</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">英文字符数:</span>
                        <span class="detail-value" id="detail-english">0</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">数字数量:</span>
                        <span class="detail-value" id="detail-numbers">0</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">标点符号数:</span>
                        <span class="detail-value" id="detail-punctuation">0</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">空格数量:</span>
                        <span class="detail-value" id="detail-spaces">0</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">非空白字符:</span>
                        <span class="detail-value" id="detail-non-whitespace">0</span>
                    </div>
                </div>
            </div>
            
            <div class="history">
                <div class="history-title">历史记录</div>
                <div class="history-list" id="history-list"></div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const textInput = document.getElementById('text-input');
            const countBtn = document.getElementById('count-btn');
            const clearBtn = document.getElementById('clear-btn');
            const exampleBtn = document.getElementById('example-btn');
            
            // 初始化历史记录
            let history = JSON.parse(localStorage.getItem('wordCountHistory')) || [];
            updateHistory();
            
            // 统计字数
            countBtn.addEventListener('click', function() {
                const text = textInput.value.trim();
                if (!text) {
                    alert('请输入要统计的文本');
                    return;
                }
                
                const stats = countTextStats(text);
                updateStats(stats);
                
                // 保存到历史记录
                history.unshift({
                    text: text.length > 50 ? text.substring(0, 50) + '...' : text,
                    stats: stats,
                    time: new Date().toISOString()
                });
                
                if (history.length > 10) {
                    history.pop();
                }
                
                localStorage.setItem('wordCountHistory', JSON.stringify(history));
                updateHistory();
            });
            
            // 清空文本
            clearBtn.addEventListener('click', function() {
                textInput.value = '';
                resetStats();
            });
            
            // 加载示例
            exampleBtn.addEventListener('click', function() {
                textInput.value = `这是一个示例文本，用于展示字数统计工具的功能。

本段落包含中文字符和English words混合的情况。统计工具会分别计算中英文字符数量。

第二段落开始，这里有一些数字：12345，以及标点符号：，。、！？

最后一段落演示多段落统计功能。工具会准确识别段落数量。`;
            });
            
            // 更新统计数据显示
            function updateStats(stats) {
                document.getElementById('total-words').textContent = stats.totalWords;
                document.getElementById('total-chars').textContent = stats.totalChars;
                document.getElementById('chinese-chars').textContent = stats.chineseChars;
                document.getElementById('english-chars').textContent = stats.englishChars;
                document.getElementById('paragraphs').textContent = stats.paragraphs;
                
                document.getElementById('detail-chinese').textContent = stats.chineseChars;
                document.getElementById('detail-english').textContent = stats.englishChars;
                document.getElementById('detail-numbers').textContent = stats.numbers;
                document.getElementById('detail-punctuation').textContent = stats.punctuation;
                document.getElementById('detail-spaces').textContent = stats.spaces;
                document.getElementById('detail-non-whitespace').textContent = stats.nonWhitespace;
            }
            
            // 重置统计数据显示
            function resetStats() {
                document.getElementById('total-words').textContent = '0';
                document.getElementById('total-chars').textContent = '0';
                document.getElementById('chinese-chars').textContent = '0';
                document.getElementById('english-chars').textContent = '0';
                document.getElementById('paragraphs').textContent = '0';
                
                document.getElementById('detail-chinese').textContent = '0';
                document.getElementById('detail-english').textContent = '0';
                document.getElementById('detail-numbers').textContent = '0';
                document.getElementById('detail-punctuation').textContent = '0';
                document.getElementById('detail-spaces').textContent = '0';
                document.getElementById('detail-non-whitespace').textContent = '0';
            }
            
            // 更新历史记录显示
            function updateHistory() {
                const historyList = document.getElementById('history-list');
                historyList.innerHTML = '';
                
                history.forEach(item => {
                    const historyItem = document.createElement('div');
                    historyItem.className = 'history-item';
                    historyItem.innerHTML = `
                        <div>${item.text}</div>
                        <div class="time">${new Date(item.time).toLocaleString()}</div>
                    `;
                    historyItem.addEventListener('click', () => {
                        // 点击历史记录项可以重新加载统计结果
                        updateStats(item.stats);
                    });
                    historyList.appendChild(historyItem);
                });
            }
            
            // 文本统计函数
            function countTextStats(text) {
                // 总字符数（包括空格）
                const totalChars = text.length;
                
                // 非空白字符数
                const nonWhitespace = text.replace(/\s/g, '').length;
                
                // 空格数量
                const spaces = (text.match(/\s/g) || []).length;
                
                // 中文字符（包括中文标点）
                const chineseChars = (text.match(/[\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFFEF]/g) || []).length;
                
                // 英文字符（a-zA-Z）
                const englishChars = (text.match(/[a-zA-Z]/g) || []).length;
                
                // 数字数量
                const numbers = (text.match(/[0-9]/g) || []).length;
                
                // 标点符号（不包括中文标点）
                const punctuation = (text.match(/[!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~]/g) || []).length;
                
                // 段落数（按空行分隔）
                const paragraphs = text.trim() === '' ? 0 : text.split(/\n\s*\n/).length;
                
                // 总字数（中文字+英文单词）
                const words = countWords(text);
                
                return {
                    totalWords: words,
                    totalChars: totalChars,
                    chineseChars: chineseChars,
                    englishChars: englishChars,
                    paragraphs: paragraphs,
                    numbers: numbers,
                    punctuation: punctuation,
                    spaces: spaces,
                    nonWhitespace: nonWhitespace
                };
            }
            
            // 计算总字数（中文字+英文单词）
            function countWords(text) {
                // 中文词（连续的中文字符）
                const chineseWords = (text.match(/[\u4e00-\u9fa5]+/g) || []).length;
                
                // 英文词（连续的字母）
                const englishWords = (text.match(/[a-zA-Z]+/g) || []).length;
                
                return chineseWords + englishWords;
            }
            
            // 实时统计（可选）
            textInput.addEventListener('input', function() {
                const text = textInput.value.trim();
                if (text) {
                    const stats = countTextStats(text);
                    updateStats(stats);
                } else {
                    resetStats();
                }
            });
        });
    </script>
</body>
</html>
